手把手教你vite+elementPlus+vue3+jsplumb+pinia+sortable实现完整的流程图

2023-05-20 13:32| 来源: 网络整理| 查看: 265

1、vite创建项目 yarn create vite

2、安装vue-router npm install vue-router 1、新建一个router的文件夹 2、在文件夹下面创建一个index.js文件 3、main.js进行挂载 index.js import { createRouter, createWebHistory } from 'vue-router' import home from '../view/home.vue' const routerHistory = createWebHistory() const router = createRouter({ history: routerHistory, routes: [ { path: '/', redirect:'home' }, { path: '/home', name:'home', component: home }, ] }) export default router; main.js挂在router import { createApp } from 'vue' import App from './App.vue' //路由 import router from './router' createApp(App).use(router).use(store).use(ElementPlus).mount('#app') app.vue改造 3、安装pinia npm i pinia -S 1、新建 src/store 目录并在其下面创建 index.js，导出 store import { createPinia } from 'pinia' const store = createPinia() export default store 2、在 main.js 中引入并使用 import { createApp } from 'vue' import App from './App.vue' import store from './store' import router from "./router"; createApp(App).use(router).use(store).mount('#app') 3、在 src/store 下面创建一个 confgJsplumb.js import { defineStore } from 'pinia' export const configJsplumb = defineStore({ id: 'confgJsplumb', // id必填，且需要唯一 state: () => { return { name: '张三' } }, actions: { updateName(name) { this.name = name } } }) 4、获取State {{configJsplumbData.name}} import { configJsplumb } from '../store/configJsplumb.js' let configJsplumbData = configJsplumb() console.log(configJsplumbData.name) 5、修改值 {{configJsplumbData.name}} import { configJsplumb } from '../store/configJsplumb.js' let configJsplumbData = configJsplumb() configJsplumbData.updateName('李四') 4、安装less或者scss yarn add -D sass npm install sass -D yarn add -D less npm install less -D 5、集成eslint和prettier npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-html prettier @babel/plugin-syntax-dynamic-import babel-eslint 创建配置文件： `.eslintrc.js` module.exports = { root: true, env: { node: true, 'vue/setup-compiler-macros': true, }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier', 'plugin:prettier/recommended', ], plugins: ['vue', 'html', 'prettier'], parserOptions: { ecmaVersion: 8, }, rules: { 'prettier/prettier': 'error', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/no-multiple-template-root': 'off', 'vue/multi-word-component-names': 'off', 'no-mutating-props': 'off', 'vue/no-v-html': 'off', }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)', ], env: { mocha: true, }, }, ], }; 创建忽略文件：`.eslintignore` node_modules/ dist/ index.html 创建配置文件： `prettier.config.js` 或 `.prettierrc.js` module.exports = { // 一行最多 80 字符 printWidth: 80, // 使用 4 个空格缩进 tabWidth: 4, // 不使用 tab 缩进，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号代替双引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾使用逗号 trailingComma: 'all', // 大括号内的首尾需要空格 { foo: bar } bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'auto' } 6、安装eslint错误显示信息依赖 vite-plugin-eslint vite.config.js修改 import { defineConfig } from 'vite'; import eslintPlugin from 'vite-plugin-eslint'; export default defineConfig({ plugins: [eslintPlugin()], }); 7、安装element-plus npm install --save element-plus import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; createApp(App).use(router).use(store).use(ElementPlus).mount('#app'); 8、流程图整体功能和实现效果以及代码结构图

9、安装sortable实现左侧列表拖拽 npm install sortablejs --save //代码演示 //left.vue {{ item.name }} export default { name: 'Left', }; import { onMounted } from 'vue'; import Sortable from 'sortablejs'; import { configJsplumb } from '../../store/configJsplumb.js'; let tableData = [ { type: 'statr', name: '开始', color: '#479A52', }, { type: 'node', name: '节点', color: '#5a9cf8', }, { type: 'end', name: '结束', color: 'red', }, ]; let configJsplumbData = configJsplumb(); onMounted(() => { // 第一步，获取行容器 let dome = document.getElementById('leftUl'); // 第二步，初始化，给容器指定对应拖拽规则 new Sortable(dome, { group: 'shared', animation: 150, sort: false, //关闭在盒内可以拖拽 forceFallback: true,//忽略 HTML5拖拽行为，强制回调进行 ghostClass: 'blue-background-class', //drop placeholder的css类名 //结束拖拽 onEnd: function (evt) { //当元素移动的距离左侧小于309px的时候并且距离顶部的距离小于69px的时候，禁止插入 if (evt.originalEvent.x < 309 && evt.originalEvent.y < 69) return; let list = { id: setSessionid(),//生成随机Id x: evt.originalEvent.x - 310,//落下的位置(310是左侧列表整体的宽度) y: evt.originalEvent.y - 70,//落下的位置(70是头部的宽度) }; //根据当前数据的下标拿到对应数据的，并和list合并 Object.assign(list, tableData[evt.newIndex]); //并使用pinia来存储数据 configJsplumbData.updateSortData(list); }, }); }); //生成随机id const setSessionid = () => { var len = 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for (var i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; }; #leftUl { height: 100%; box-sizing: border-box; padding: 0 5px; list-style: none; li { text-align: center; padding: 5px 10px; border: 1px solid #eaeaea; margin-bottom: 3px; font-size: 14px; cursor: pointer; background: white; &:first-child { margin-top: 3px; } } } 10、pinia里面的代码 import { defineStore } from 'pinia'; export const configJsplumb = defineStore({ id: 'configJsplumb', // id必填，且需要唯一 state: () => { return { jslumbSortData: [], }; }, actions: { //拿到数据就插入，假如大家要做一些插入的时候，判断是否重复就可以在这里做 updateSortData(name) { this.jslumbSortData.unshift(name); }, }, }); 11、引入jsplumb npm install --save jsplumb //引入 import {ref, reactive,onMounted} from 'vue' import jsPlumb from 'jsplumb' 12、右键菜单工具 npm i contextmenu-vue@next

16、复制节点 //复制节点 const copyNodeBtn = (item) => { let list = JSON.parse(JSON.stringify(item)); list.id = GenNonDuplicateID(8); list.x = item.x + 100; nodeList.value.push(list); nextTick(() => { jsPlumb_instance.makeSource(list.id, jsplumbSourceOptionsConfig.value); jsPlumb_instance.makeTarget(list.id, jsplumbConnectOptionsConfig.value); draggableNode(list.id); }); };

提示:多选复制和多选删除其实和复制节点、删除节点方法一样，暂不做演示，循环与不循环的区别

17、连线前的校验事件 //完成连线前的校验 jsPlumb_instance.bind('beforeDrop', (evt)=>{}) jsPlumb_instance.bind('beforeDrop', (evt) => { //true代表可以连接 false代表可以连接 return beforeDrop(evt); });

true代表可以连接 false代表不可以连接这里常常一般用于两个节点连接前要做的一些判断

18、连线成功后的事件 jsPlumb_instance.bind('connection', (evt) => {}) jsPlumb_instance.bind('connection', (evt) => { let from = evt.source.id; let to = evt.target.id; lineList.value.push({ from: from, to: to, label: '', id: GenNonDuplicateID(8), Remark: '', }); }); 19、双击连接线 jsPlumb_instance.bind("dblclick",(conn, originalEvent) => {}) jsPlumb_instance.bind("dblclick",(conn, originalEvent) => { console.log(conn,originalEvent) }) 20、单击连接线 jsPlumb_instance.bind('click', (conn, originalEvent)=>{}) jsPlumb_instance.bind('click', (conn, originalEvent) => { console.log(conn, 'conn'); console.log(originalEvent, 'originalEvent'); }); 21、单击删除连接线 jsPlumb_instance.deleteConnection(对象) jsPlumb_instance.bind('click', (conn, originalEvent) => { jsPlumb_instance.deleteConnection(conn); lineList.value.forEach((item, index) => { if (item.from === conn.sourceId && item.to === conn.targetId) { this.data.lineList.splice(index, 1); } }); }); 22、断开连线后事件 jsPlumb_instance.bind('connectionDetached', (evt) => { console.log(evt, '1111'); }); 23、更改连线的样式 .jtk-connector.active { z-index: 9999; path { stroke: #150042; stroke-width: 1.5; animation: ring; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; stroke-dasharray: 5; } } @keyframes ring { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } } 24、全局控制连线的样式 // 添加虚线 //获取所有的连线数据 let lines = jsPlumb_instance.getAllConnections(); lines.forEach((line) => { line.canvas.classList.add('active'); }); //关闭虚线 let lines = jsPlumb_instance.getAllConnections(); lines.forEach((line) => { line.canvas.classList.remove('active'); }); 25、给连线加入文字或者html片段 //setLabel jsPlumb_instance.bind('click', (conn, originalEvent) => { conn.setLabel({ label: '122222', cssClass: '',location;'' }); conn.setLabel({ label: '

123213

', cssClass: '' }); console.log(conn, originalEvent); }); 26、获取所有的连线数据 jsPlumb_instance.getConnections() jsPlumb_instance.getAllConnections() getAllConnections()： getAllConnections返回的是浅拷贝的数组，对返回的连线数组进行循环遍历时，当遍历过程中删除了连线时，会破坏数组的循环。解决的办法是将返回的数组进行深拷贝再循环 getConnections(): getConnections返回的是新的数组，所以可以直接循环

27、多个节点一起拖拽 jsPlumb_instance.addToDragSelection(id); const chooseMoreDrag = () => { let idArray = nodeList.value.map((x) => x.id); for (let id of idArray) { jsPlumb_instance.addToDragSelection(id); } }; 28、取消多个节点拖拽 jsPlumb_instance.removeFromDragSelection(id); const chooseMoreDrag = () => { let idArray = nodeList.value.map((x) => x.id); for (let id of idArray) { jsPlumb_instance.removeFromDragSelection(id); } }; 29、节点可拖拽 //获取所有节点dom let elem = document.querySelectorAll('.item'); //区域范围内的节点可拖拽 jsPlumb_instance.draggable(elem, true); //节点是否可拖拽 jsPlumb_instance.setDraggable(elem, true); //可直接单独使用setDraggable 30、节点不可拖拽 //获取所有节点dom let elem = document.querySelectorAll('.item'); //区域范围内的节点可拖拽 jsPlumb_instance.draggable(elem, false); //节点是否可拖拽 jsPlumb_instance.setDraggable(elem, false); //可直接单独使用setDraggable 31、清空画布 document.querySelectorAll('画布id').html('') jsPlumb_instance.reset(); 32、删除所有连线 jsPlumb_instance.detachEveryConnection(); 33、vue2版本

juejin.cn/post/706816…

34、git地址

github.com/Caoxiongk/F…

结尾码字不易，喜欢的小伙伴记得点赞关注

【本文地址】

公司简介

联系我们